<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>简单应用-已知树形的数据</title>
  <link href="src/css/layui.css" rel="stylesheet">
  <link href="examples/layui-icon-additional/iconfont.css" rel="stylesheet">
  <style>
  </style>
</head>
<body>
<div class="layui-fluid" style="padding: 15px;">
  <table id="demo"></table>
</div>

<script src="src/layui.js"></script>
<script src="examples/js/mock.js"></script>
<script>
  layui.use(['treeTable'], function () {
    var treeTable = layui.treeTable;

    // 正式版会内置几个比较合适的图标，不需要自己set，如果有自定义默认图标的话就可以参考下面的方式给自己的系统设置默认各种状态的图标
    treeTable.set({
      tree: {
        view: {
          iconOpen: '<i class="layui-icon layui-icon-folderOpen"></i>',
          iconClose: '<i class="layui-icon layui-icon-folder2"></i>',
          // iconLeaf: '<i class="layui-icon layui-icon-file"></i>', // 设置默认的叶子菜单图标
          iconLeaf: '<i class="layui-icon layui-icon-leaf"></i>', // 设置默认的叶子菜单图标
        }
      },
    })

    // 生成随机ID函数
    const createId = (() => {
      let nextId = 1
      return () => nextId++
    })()

    // 生成节点函数
    const createNode = (parentId = null, level = 0) => {
      const id = createId()
      const children = level < 3 ? Mock.mock({
        'array|0-5': [
          createNode.bind(null, id, level + 1)
        ]
      }).array : []

      return {
        id,
        name: `User${id}`,
        type: Mock.mock('@d6'),
        status: Mock.Random.d4(),
        score: Mock.Random.d100(),
        experience: Mock.Random.integer(1000, 99999),
        sex: Mock.Random.cword('男女', 1),
        city: Mock.Random.city(),
        description: Mock.mock('@cparagraph'),
        createTime: Mock.mock('@datetime'),
        parentId,
        children,
        isParent: !!children.length
      }
    }

    // 生成树
    const rootNodes = Mock.mock({
      'array|10-20': [
        createNode
      ]
    }).array

    // 将树展开
    const flattenTree = (nodes, parentId = null) => {
      let result = []
      nodes.forEach(node => {
        result.push({
          ...node,
          parentId,
          children: undefined
        })
        if (node.children.length > 0) {
          result = result.concat(flattenTree(node.children, node.id))
        }
      })
      return result
    }

    const getTreeData = function (nodes) {
      let result = []
      nodes.forEach(node => {
        result.push({...node, parentId: null, children: getTreeData(node.children)});
      })
      return result
    }

    // var testDatas = flattenTree(rootNodes);
    var testDatas = getTreeData(rootNodes);

    treeTable.render({
      elem: '#demo',
      data: testDatas,
      totalRow: true,
      tree: {
        view: {},
      },
      maxHeight: 'full-30',
      cols: [[
        {type: 'numbers', fixed: 'left'}
        , {field: 'id', title: 'ID', width: 145, sort: true, fixed: 'left', totalRow: '合计：'}
        , {field: 'name', title: '用户名', width: 180, fixed: 'left'}
        , {field: 'experience', title: '积分', width: 90, sort: true, totalRow: '{{= d.TOTAL_NUMS }}'}
        , {field: 'sex', title: '性别', width: 80, sort: true}
        , {field: 'score', title: '评分', width: 80, sort: true, totalRow: true}
        , {field: 'city', title: '城市', width: 150, templet: '#tpl1'}
        , {field: 'description', title: '描述信息', minWidth: 200, templet: '#tpl2'}
        , {field: 'createTime', title: '创建时间', width: 170}
      ]],
      done: function (res, curr, count) {
        // console.log('渲染完成', res, curr, count);
      }
    });
  })
</script>
</body>
</html>
